<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchParameter" class="demo-form-inline">
      <el-form-item label="用户姓名">
        <el-input size="small" style="width: 150px" v-model="searchParameter.userName" clearable
                  placeholder="用户姓名"/>
      </el-form-item>

      <el-form-item label="保单日期">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="searchParameter.userCard"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input size="small" v-model="searchParameter.userCard" clearable placeholder="身份证号"/>
      </el-form-item>

      <el-form-item>
        <el-button size="small" @click="handleSearch">查询</el-button>
      </el-form-item>


    </el-form>
    <el-table
      id="out-table"
      class="el-table"
      border
      :data="listInsurance.list"
      style="width: 98%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        align="center"
        prop="userName"
        label="被服务对象"
        width="120"
      />
      <el-table-column
        align="center"
        prop="userCard"
        label="身份证号"
        width="200"
      />
      <el-table-column
        align="center"
        prop="orderTime"
        label="下单日期"
        width="160"
      />
      <el-table-column
        align="center"
        prop="accompanyName"
        label="陪诊人员姓名"
        width="150"
      />
      <el-table-column
        align="center"
        prop="accompanyCard"
        width="200"
        label="身份证号"
      />
      <el-table-column
        align="center"
        prop="startAddress"
        label="出发点"
      />
      <el-table-column
        align="center"
        prop="endAddress"
        label="抵达地点"
      />

      <el-table-column
        align="center"
        prop="status"
        label="订单状态"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status===3">进行中</el-tag>
          <el-tag v-if="scope.row.status===4 || scope.row.status===5">已完成</el-tag>

        </template>
      </el-table-column>

    </el-table>

    <!-- 分页-->
    <el-pagination
      background
      :current-page="listInsurance.pageNum"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="listInsurance.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="handlePrevClick"
      @next-click="handleNextClick"
    />
  </div>

</template>

<script>
import amps from '@/components/Map/amps'
import {AuditAccompany, getAccompany, listAccompanyPage} from "@/api/accompany";
import {listInsurancePage} from "@/api/order";

export default {
  name: 'relation',
  components: {
    amps
  },
  data() {
    return {

      pageSize: 10,
      pageNum:1,
      searchParameter:{

      },
      listInsurance:[],
      value1:''

    }
  },
  created() {
    this.listInsurancePage()
  },
  methods: {
    listInsurancePage() {
      listInsurancePage(this.searchParameter,this.pageNum,this.pageSize).then(res => {
        this.listInsurance = res.dataMap
      })
    },

    //搜索
    handleSearch() {
      this.listInsurancePage()
    },
    //勾选的信息
    handleSelectionChange(val) {
      console.log(val)

    },


    handleSizeChange(val) {
      this.pageSize = val
      this.listInsurancePage()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.listInsurancePage()

      console.log(`当前页: ${val}`)
    },
    handlePrevClick() {
      this.pageNum--
      this.listInsurancePage()
    },
    handleNextClick() {
      this.pageNum++
      this.listInsurancePage()
    },

  }
}
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.base-input {
  width: 200px;

}

.el-select .el-input {
  width: 110px;
}

.el-dialog__body {
  padding: 30px 40px;
}

.app-container {
  margin-top: 10px;
}

.el-pagination {
  float: right;
  margin: 10px 30px;
}

.el-table {
  margin: 10px 0px;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
